<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal de Notícias - Unidade 3.3 (AJAX)</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background-color: #f8f9fa; }
        .news-card { transition: transform 0.2s; cursor: pointer; }
        .news-card:hover { transform: scale(1.02); }
        #loading-spinner { display: none; }
    </style>
</head>
<body>

    <nav class="navbar navbar-dark bg-primary mb-4">
        <div class="container">
            <span class="navbar-brand mb-0 h1">TechNews FMU</span>
            <button class="btn btn-outline-light btn-sm" id="btn-load">Atualizar via AJAX</button>
        </div>
    </nav>

    <div class="container">
        <header class="mb-4">
            <h1 class="display-5">Últimas Notícias</h1>
            <p class="text-muted">Dados carregados via <strong>Fetch API (AJAX moderno)</strong>.</p>
        </header>

        <div id="loading-spinner" class="text-center my-5">
            <div class="spinner-border text-primary" role="status"></div>
            <p class="mt-2">Requisitando JSON ao servidor...</p>
        </div>

        <div class="row" id="news-container"></div>
    </div>

    <script>
        const newsContainer = document.getElementById('news-container');
        const btnLoad = document.getElementById('btn-load');
        const spinner = document.getElementById('loading-spinner');

        // 3.4.3. Consumo de APIs via AJAX (Fetch)
        async function fetchNews() {
            spinner.style.display = 'block';
            newsContainer.innerHTML = '';

            try {
                response = await fetch('https://robson.isy.one/noticias/');
                
                if (!response.ok) {
                    throw new Error("Não foi possível buscar notícias.");                }

                data = await response.json(); // Converte a resposta em objeto JS
                renderNews(data);
                spinner.style.display = 'none';

            } catch (error) {
                spinner.style.display = 'none';
                newsContainer.innerHTML = `
                    <div class="alert alert-danger">
                        <strong>Erro de Requisição:</strong> ${error.message} <br>
                        <small>Certifique-se de que o arquivo 'noticias.json' existe ou que você está usando um servidor local (Live Server).</small>
                    </div>`;
            }
        }

        function renderNews(newsList) {
            newsList.forEach(item => {
                const card = document.createElement('div');
                card.className = 'col-md-4 mb-4';
                card.innerHTML = `
                    <div class="card h-100 shadow-sm news-card">
                        <div class="card-body">
                            <span class="badge bg-primary mb-2">${item.categoria}</span>
                            <h5 class="card-title">${item.titulo}</h5>
                            <p class="card-text text-muted">${item.resumo}</p>
                        </div>
                        <div class="card-footer bg-transparent border-top-0">
                            <small class="text-muted">Escrito por: ${item.autor}</small>
                        </div>
                    </div>
                `;
                newsContainer.appendChild(card);
            });
        }

        btnLoad.addEventListener('click', fetchNews);
        window.onload = fetchNews;
    </script>
</body>
</html>